<template>
  <div class="app-container">
    <el-date-picker
      v-model="startDate"
      type="datetime"
      :placeholder="$t('startDate')"
      align="right"
      :picker-options="pickerOptions1"
      value-format="timestamp"
    />
    <el-button
      type="primary"
      icon="el-icon-search"
      @click="outOfContactDevice"
    >{{ $t('search') }}
    </el-button>
    <div class="uni-scroll">
      <el-table
        :data="deviceList"
        style="width: 100%;"
      >
        <el-table-column prop="deviceName" :label="$t('device')+$t('name')"  />
        <el-table-column prop="deviceCore" :label="$t('deviceCore')"  />
        <el-table-column prop="phoneNumber" :label="$t('cardNumber')" width="180"  />
        <el-table-column
          prop="phoneStatus"
          :label="$t('card')+$t('status')"

          :formatter="formatPhoneStatus"
          width="80"
        />
        <el-table-column width="65"  :label="$t('surplus')">
          <template slot-scope="scope">
            <app-surplus :device="scope.row" />
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('status')" sortable >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status=='ONLINE'?'success':'danger'">{{ formatDeviceStatus(scope.row) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('function')" width="230" >
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="edit(scope.row)"
            >{{ $t('info') }}
            </el-button>
            <el-button
              type="text"
              icon="el-icon-s-tools"
              @click="deviceSetting(scope.row)"
            >{{ $t('setting') }}
            </el-button>
            <el-button
              type="text"
              icon="el-icon-pie-chart"
              @click="getSensor(scope.row)"
            >{{ $t('sensor') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        :visible.sync="showSetting"
        :title="device.deviceName"
        width="1200px"
        top="15px"
      >
        <device-setting
          :device-core="device.deviceCore"
          class="uni-scroll"
          style="height: 600px"
        />
      </el-dialog>

      <el-drawer
        size="70%"
        :visible.sync="drawer"
        direction="rtl"
      >
        <div class="uni-scroll" style="height: calc(100vh - 100px)">
          <sensor-camera-list :device="device" />
        </div>
      </el-drawer>

    </div>
  </div>
</template>

<script>
import DeviceSetting from '@/components/DeviceSetting'
import AppSignal from '@/components/AppSignal'
import AppSurplus from '@/components/AppSurplus'
import SensorCameraList from '@/components/SensorCameraList'
import { outOfContactDevice } from '@/api/iot/iotDeviceApi'
import {
  formatDate,
  formatPhoneStatus,
  formatDeviceStatus
} from '@/util/common'

export default {
  name: 'OutOfContactDevice',
  components: {
    AppSignal,
    DeviceSetting,
    AppSurplus,
    SensorCameraList
  },
  data() {
    return {
      deviceList: [],
      device: {},
      drawer: false,
      showSetting: false,
      startDate: '',
      pickerOptions1: {
        shortcuts: [
          {
            text: this.$t('today'),
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: this.$t('today'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: this.$t('a') + this.$t('week') + this.$t('ago'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      }
    }
  },
  created() {
    this.startDate = new Date().getTime() - 7 * 24 * 60 * 60 * 1000
    this.outOfContactDevice()
  }, methods: {
    edit(item) {
      this.device = item
      this.$router.push({
        path: '/device/manage/' + item.deviceCore,
        query: { deviceCore: item.deviceCore, deviceName: item.deviceName }
      })
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    formatPhoneStatus(item) {
      return formatPhoneStatus(this, item.phoneStatus)
    },
    formatDeviceStatus(item) {
      const status = formatDeviceStatus(this, item.status)
      let time
      switch (item.status) {
        case 'ONLINE':
          time = this.formatDate(item.lastOnLineTimer)
          break
        default:
          time = this.formatDate(item.lastOffLineTimer)
      }
      return status + ' ' + time
    },
    outOfContactDevice() {
      outOfContactDevice({
        startTime: Math.round(this.startDate / 1000)
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          this.deviceList = data
        }
      })
    },
    deviceSetting(item, index) {
      this.device = item
      this.showSetting = true
    },
    getSensor(item) {
      this.device = item
      this.drawer = true
    }
  }
}
</script>


